<%--
  Created by IntelliJ IDEA.
  User: 郑自航
  Date: 2018/7/4
  Time: 11:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WashCarOrder</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="${basePath}/layui/css/layui.css">
    <script type="text/javascript" src="${basePath}/js/plugin/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="${basePath}/js/plugin/jquery.i18n.properties.min.js"></script>
    <script src="${basePath}/layui/layui.js"></script>
</head>

<body class="page-body">
<div class="layui-inline"></div>
<div id="content">
    <div class="layui-btn-container">
        <div class="layui-inline"><%--a.totalCount,b.willPay,c.willService,d.finsh,e.cancel,f.totalMoney--%>
            <button class="layui-btn layui-btn-sm l-lab-text" id="totalCount">全部订单</button>
            <button class="layui-btn layui-btn-sm layui-btn-warm l-lab-text" id="willPay">待付款</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger l-lab-text" id="willService">待服务</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary l-lab-text" id="finsh">已完成</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger l-lab-text" id="cancel">已取消</button>
            <button class="layui-btn layui-btn-sm layui-btn-warm l-lab-text" id="totalMoney">订单总额</button>
        </div>
    </div>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label l-lab-text">姓名:</label>
                <div class="layui-input-inline">
                    <input name="userName" id="name_inputId" lay-verify="" placeholder="姓名" autocomplete="true"
                           class="layui-input"
                           type="text">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label l-lab-text">电话:</label>
                <div class="layui-input-inline">
                    <input name="userPhone" id="phone_inputId" lay-verify="phone" placeholder="电话" autocomplete="true"
                           class="layui-input"
                           type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label l-lab-text">订单编号:</label>
                <div class="layui-input-inline">
                    <input name="orderNo" id="orderNo_inputId" lay-verify="" placeholder="订单编号" autocomplete="true"
                           class="layui-input"
                           type="text">
                </div>
            </div>

            <div class="layui-inline"><%--(1下单中,2下单成功,3支付成功,4支付失败,5已撤销,6)--%>
                <label class="layui-form-label l-lab-text">订单状态:</label>
                <div class="layui-input-inline">
                    <select name="status" id="status_selectId" lay-search="">
                        <option value="" class="l-lab-text">All</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline"><%--(洗车类型)--%>
                <label class="layui-form-label l-lab-text">服务类型:</label>
                <div class="layui-input-inline">
                    <select name="serverType" id="serverType_selectId" lay-search="">
                        <option value="" class="l-lab-text">All</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label l-lab-text">服务状态:</label>
                <div class="layui-input-inline">
                    <select name="serviceStatus" id="serviceStatus_selectId" lay-search="">
                        <option value="" class="l-lab-text">All</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label l-lab-text">洗车时间:</label>
                <div class="layui-input-inline">
                    <input class="layui-input Date" name="washStartTime" id="washStartTime" placeholder="请选择"
                           type="text">
                </div>
                <div class="layui-form-mid layui-word-aux"> -</div>
                <div class="layui-input-inline">
                    <input class="layui-input Date" name="washEndTime" id="washEndTime" placeholder="请选择" type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label l-lab-text">车辆信息:</label>
                <div class="layui-input-inline">
                    <input name="carInfo" id="carInfo_inputId" lay-verify="" placeholder="车辆信息" autocomplete="true"
                           class="layui-input"
                           type="text">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label l-lab-text">下单时间:</label>
                <div class="layui-input-inline">
                    <input class="layui-input Date" name="createTimeBegDate" id="createTimeBegDate" placeholder="请选择"
                           type="text">
                </div>
                <div class="layui-form-mid layui-word-aux"> -</div>
                <div class="layui-input-inline">
                    <input class="layui-input Date" name="createTimeEndDate" id="createTimeEndDate" placeholder="请选择"
                           type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label l-lab-text">支付时间:</label>
                <div class="layui-input-inline">
                    <input class="layui-input Date" name="payTimeBegDate" id="updateTimeBegDate" placeholder="请选择"
                           type="text">
                </div>
                <div class="layui-form-mid layui-word-aux"> -</div>
                <div class="layui-input-inline">
                    <input class="layui-input Date" name="payTimeEndDate" id="updateTimeEndDate" placeholder="请选择"
                           type="text">
                </div>
            </div>

            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm" lay-filter="form-submit" onclick="tableReload(1)"
                        title="查询">
                    <i class="layui-icon">&#xe615;</i>
                </button>
                <shiro:hasPermission name="order:menu:add">
                    <button type="button" class="layui-btn layui-btn-sm" onclick="addOrUpdateWashCarOrder()" title="添加">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </shiro:hasPermission>
                <shiro:hasPermission name="order:menu:del">
                    <button type="button" class="layui-btn layui-btn-sm" id="btn_del" title="批量删除">
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </shiro:hasPermission>
                <button class="layui-btn layui-btn-sm" type="reset" title="清空查询">
                    <i class="layui-icon">&#xe666;</i>
                </button>
                <button class="layui-btn layui-btn-sm" onclick="exportData()" title="导出 Excel">
                    <i class="layui-icon">&#xe601;</i>
                </button>
            </div>
        </div>
    </form>
</div>
<div class="ibox-content">
    <table class="table-hide" id="demoTable" lay-data="{id: 'idApply'}" lay-filter="Apply"></table>
</div>
<script src="${basePath}/js/i18n.js"></script>
<script src="${basePath}/js/common.js"></script>
<script src="${basePath}/js/DateFormate.js"></script>
</body>
<script type="text/html" id="titleTpl4">
    {{# if(!(d.createTime)){ }}
    {{# } else { }}
    {{formatDateTime(new Date(d.createTime))}}
    {{# } }}
</script>
<script type="text/html" id="titleTpl5">
    {{# if(!(d.payTime)){ }}
    {{# } else { }}
    {{ formatDateTime(new Date(d.payTime)) }}
    {{# } }}
</script>
<script type="text/html" id="titleTpl_user">
    {{# if(!(d.userName)){ }}
    {{ d.userPhone }}
    {{# } else { }}
    {{ d.userName+"("+d.userPhone+")" }}
    {{# } }}
</script>
<script type="text/html" id="titleTpl_status">
    {{#   if(!(d.status)&&d.status!=0){          }}
    {{#   } else {        }}
    {{#      var data = $("#status_selectId").data('status_selectId'); }}
    {{#      for (var opt in data) {             }}
    {{#          if( data[opt].value == d.status){     }}
    {{#             if( d.status == 4 ){     }}
    {{              '<span style="color: blue;">'+data[opt].label+'</span>'}}
    {{#              }else{       }}
    {{              '<span style="color: red;">'+data[opt].label+'</span>'}}
    {{#              }       }}
    {{#                break;    }}
    {{#          }       }}
    {{#       }       }}
    {{#   }       }}
</script>
<script type="text/html" id="titleTpl_serverType">
    {{#   if(!(d.serverType)&&d.serverType!=0){          }}
    {{#   } else {        }}
    {{#      var data = $("#serverType_selectId").data('serverType_selectId'); }}
    {{#      for (var opt in data) {             }}
    {{#          if( data[opt].value == d.serverType){     }}
    {{                 data[opt].label       }}
    {{#                break;    }}
    {{#          }       }}
    {{#       }       }}
    {{#   }       }}
</script>
<script type="text/html" id="titleTpl_serviceStatus">
    {{#   if(!(d.serviceStatus)&&d.serviceStatus!=0){          }}
    {{#   } else {        }}
    {{#      var data = $("#serviceStatus_selectId").data('serviceStatus_selectId'); }}
    {{#      for (var opt in data) {             }}
    {{#          if( data[opt].value == d.serviceStatus){     }}
    {{#             if( d.serviceStatus == 3 ){     }}
    {{              '<span style="color: blue;">'+data[opt].label+'</span>'}}
    {{#              }else{       }}
    {{              '<span style="color: red;">'+data[opt].label+'</span>'}}
    {{#              }       }}
    {{#                break;    }}
    {{#          }       }}
    {{#       }       }}
    {{#   }       }}
</script>
<script type="text/html" id="titleTpl_washTime">
    {{#   if(!(d.washStartTime)&&!(d.washEndTime)){          }}
    {{#   } else {        }}
    {{ formatDateTime2(new Date(d.washStartTime))+' '+formatTime(new Date(d.washEndTime)) }}
    {{#   }       }}
</script>
<script type="text/html" id="titleTpl_orderType">
    {{#   if(!(d.orderType)&&d.orderType!=0){          }}
    {{#   } else {        }}
    {{#      var data = $("#orderType_selectId").data('orderType_selectId'); }}
    {{#      for (var opt in data) {             }}
    {{#          if( data[opt].value == d.orderType){     }}
    {{                 data[opt].label       }}
    {{#                break;    }}
    {{#          }       }}
    {{#       }       }}
    {{#   }       }}
</script>
<script type="text/javascript">
    function exportData() {
        //加载层-风格4
        top.layer.msg('交易数据导出中···', {
            icon: 16
            , shade: 0.01
        });
        var data = $('form').serialize();
        window.open("${basePath}/washcarorder/washCarOrder/exportWashCarOrder.do?" + data);
        top.layer.closeAll();
    }

    function addOrUpdateWashCarOrder(id) {
        var layer = window.parent.layer;
        top.addWashCarOrder_layer = layer.open({
            type: 2,
            title: top._loadText(id ? 'Update' : 'Add') + " " + top._loadText('WashCarOrder'),
            shadeClose: true,
            shade: false,
            // maxmin: true, //开启最大化最小化按钮
            area: ['460px', '600px'],
            content: 'washCarOrderEdit.page' + (id ? "?id=" + id : ''),
            end: tableReload
        });
        return false;
    }

    var table;

    //提交查询
    function tableReload(pageNO) {
        console.log("...........tableReload......................")
        var queryParams;
        queryParams = $(".layui-form").serializeJson();
        // top.myLayer.alert(queryParams);
        debugger
        table.reload('idApply', {
            where: queryParams,
            page: {
                curr: pageNO ? pageNO : 1    //重新从第 n 页开始
            }
        });
        //自动切换语言
        doTranslateTable();
        //订单统计
        queryOrderCount();
        return false;
    }

    /**订单统计*/
    function queryOrderCount() {
        // a.totalCount,b.willPay,c.willService,d.finsh,e.cancel,f.totalMoney
        $.getJSON('${basePath}/washcarorder/washCarOrder/findWashCarOrderStatistics.do', {}, function (result) {
            if (result && result.code == 0) {
                //保存字典
                var data = result.data;
                $('#totalCount').text("全部订单" + "(" + data.totalCount + ")");
                $('#willPay').text("待付款" + "(" + data.willPay + ")");
                $('#willService').text("待服务" + "(" + data.willService + ")");
                $('#finsh').text("已完成" + "(" + data.finsh + ")");
                $('#cancel').text("已取消" + "(" + data.cancel + ")");
                $('#totalMoney').text("订单总额" + "(¥" + data.totalMoney + ")");
            } else {
                top.myLayer.confirm(top._loadText('Fail ' + result.msg));
            }
        })
    }

    $(function () {
        queryOrderCount();
        //初始化洗车时间下拉选
        var type = 'washCarOrder_washTime';
        $.post('${basePath}/server/serviceTime/findWashTimeList.do', {}, function (result) {
            if (result && result.code == 0) {
                for (var opt in result.data) {
                    $("#washTime_selectId").append(
                        '<option value="' + result.data[opt].id + '" class="l-lab-text">' +
                        result.data[opt].label +
                        result.data[opt].time +
                        '</option>'
                    )
                }
            } else {
                top.myLayer.confirm(top._loadText('Fail ' + result.msg));
            }
        });
        /*初始化下拉选*/
        var types = ['washCarOrder_status', 'washCarOrder_serverType'
            , 'washCarOrder_serviceStatus', 'washCarOrder_orderType'];
        //批量初始化下拉选
        initBatchSelect(types, null);
        // debugger
        // 自动切换语言
        doTranslate();
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
            element.init();
//             element.init('breadcrumb');
//             element.render('nav');
//             element.render('tab');
//             //…
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //日期时间选择器
            var ids = ['washStartTime', 'washEndTime', 'updateTimeBegDate', 'updateTimeEndDate', 'createTimeBegDate', 'createTimeEndDate'];
            //批量初始化
            initBatchDate(laydate, ids);
        });

        layui.use('table', function () {
            table = layui.table;
            var tableIns = table.render({
                elem: '#demoTable',
                url: '${basePath}/washcarorder/washCarOrder/findWashCarOrderList.do',
                id: 'idApply',
                cellMinWidth: 120,
                page: {
                    limit: 20
                },
                method: "post",
                done: function (res, curr, count) {
                },
                cols: [
                    [{
                        field: 'id',
                        type: 'checkbox',
                        title: 'ID',
                        sort: true,
                        fixed: 'left'
                    },
                        {
                            title: '<span  class="l-lab-text">Index</span>',
                            templet: '#indexTpl',
                            width: 60,
                            align: 'center'
                        },
                        {
                            field: 'userName',
                            title: '<span  class="l-lab-text">会员信息</span>',
                            width: 120,
                            sort: true,
                            templet: titleTpl_user //自定义模板
                            /*align: 'center'*/
                        },
                        {
                            field: 'orderNo',
                            title: '<span  class="l-lab-text">订单编号</span>',
                            width: 120,
                            sort: true,
                            /*align: 'center'*/
                        },
                        {
                            field: 'serverType',
                            'title': '<span  class="l-lab-text">服务类型</span>',
                            width: 120,
                            sort: true,
                            templet: titleTpl_serverType //自定义模板
                        },
                        {
                            field: 'money',
                            'title': '<span  class="l-lab-text">订单金额</span>',
                            width: 100,
                            sort: true,
                            align: 'center'
                        },
                        {
                            field: 'discounts',
                            'title': '<span  class="l-lab-text">优惠金额</span>',
                            width: 100,
                            sort: true,
                            align: 'center'
                        },
                        {
                            field: 'status', /*(1下单中,2下单成功,3下单成功,4支付成功,5支付失败,6已撤销)*/
                            'title': '<span  class="l-lab-text">订单状态</span>',
                            width: 120,
                            sort: true,
                            templet: titleTpl_status //自定义模板
                        },
                        {
                            field: 'serviceStatus',
                            'title': '<span  class="l-lab-text">服务状态</span>',
                            width: 100,
                            sort: true,
                            align: 'center',
                            templet: titleTpl_serviceStatus //自定义模板
                        },
                        {
                            field: 'washTime',
                            'title': '<span  class="l-lab-text">洗车时间</span>',
                            width: 120,
                            sort: true,
                            templet: titleTpl_washTime //自定义模板
                        },
                        {
                            field: 'washAddress',
                            title: '<span  class="l-lab-text">洗车地点</span>',
                            width: '120',
                            sort: true,
                            /*align: 'center'*/
                        },
                        {
                            field: 'carInfo',
                            title: '<span  class="l-lab-text">车辆信息</span>',
                            width: 120,
                            sort: true,
                            /*align: 'center'*/
                        },
                        /*{
                            field: 'note',
                            title: '<span  class="l-lab-text">用户留言</span>',
                            width: 120,
                            sort: true,
                            /!*align: 'center'*!/
                        },*/
                        {
                            field: 'createTime',
                            'title': '<span  class="l-lab-text">下单时间</span>',
                            width: 120,
                            sort: true,
                            templet: titleTpl4
                        },
                        {
                            field: 'payTime',
                            'title': '<span  class="l-lab-text">支付时间</span>',
                            width: 120,
                            sort: true,
                            templet: titleTpl5
                        },
                        {
                            fixed: 'right',
                            title: '<span  class="l-lab-text">Operation</span>',
                            align: 'center',
                            width: 160,
                            toolbar: '#barTools'
                        }
                    ]
                ],
            });
            /*table.on('sort(idApply)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                debugger
            });*/
            //自动切换语言
            doTranslateTable();
            var $ = layui.$;
            //监听搜索查询
            layui.use('form', function () {
                var form = layui.form;
                //监听提交
                form.on('submit()', function (data) {
                    debugger
                    // top.layer.msg(JSON.stringify(data.field));
                    // tableReload(1);
                    return false;
                })
            });
            //量删除按钮
            $('#btn_del').on('click', function () {
                var checkStatus = table.checkStatus('idApply'); //获取选中的列
                if (checkStatus.data.length != 0) {
                    top.layer.confirm('确认是否删除', function (index) {
                        top.layer.close(index);
                        var chk_value = new Array();
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            chk_value.push(checkStatus.data[i].id + '');
                        }
                        var param = {
                            "ids": chk_value
                        };
                        $.ajax({
                            type: "POST",
                            url: "${basePath}/washcarorder/washCarOrder/deleteWashCarOrderByIds.do",
                            data: param,
                            traditional: true,//这里设置为true
                            success: function () {
                                tableReload(checkStatus.data[0].page);
                            }
                        });
                        // tableReload(pageNO);
                    });
                } else {
                    top.layer.msg("请选择至少一条数据");
                }

                return false;
            });

            //监听工具条
            table.on('tool()', function (obj) {
                debugger
                var data = obj.data;
                var checkStatus = table.checkStatus('idApply');
                console.log(checkStatus.data);
                if (obj.event === 'del') {
                    top.layer.confirm('确认是否删除', function (index) {
                        var param = {
                            "id": data.id
                        };
                        $.ajax({
                            type: "POST",
                            url: "${basePath}/washcarorder/washCarOrder/deleteWashCarOrder.do",
                            data: param,
                            success: function (data) {
                                top.layer.msg(data.msg);
                            }
                        });
                        obj.del();
                        top.layer.close(index);

                    });
                } else if (obj.event === 'update') {
                    addOrUpdateWashCarOrder(data.id);
                } else if (obj.event === 'finsh') {
                    console.log(data);
                    top.layer.confirm('确认是否服务完成', function (index) {
                        var param = {
                            "id": data.id,
                            "status":4,
                            "serviceStatus": 3
                        };
                        $.ajax({
                            type: "POST",
                            url: "${basePath}/washcarorder/washCarOrder/updateWashCarOrder.do",
                            data: param,
                            success: function (res) {
                                top.layer.msg(res.msg);
                                tableReload(data.page)

                            }
                        });
                    });
                }
            });
        });
    })
</script>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barTools">

    <shiro:hasPermission name="order:menu:finsh">
        {{#   if( d.serviceStatus != 3 ){   }}
        <a class="layui-btn layui-btn-danger layui-btn-xs l-lab-text" lay-event="finsh" title="完成服务">{{top._loadText('finsh')}}</a>
        {{#    }   }}
    </shiro:hasPermission>
    <shiro:hasPermission name="order:menu:update">
        <a class="layui-btn layui-btn-primary layui-btn-xs l-lab-text"
           lay-event="update">{{top._loadText('Update')}}</a>
    </shiro:hasPermission>
    <shiro:hasPermission name="order:menu:del">
        <a class="layui-btn layui-btn-danger layui-btn-xs l-lab-text" lay-event="del">{{top._loadText('Delete')}}</a>
    </shiro:hasPermission>
</script>

</html>